<style>
	.addButton {
		width: 20px;
		height: 20px;
		line-height: 16px;
		text-align: center;
		border-radius: 50%;
		background: #3b3df2;
		color: #fff;
		margin-right: 5px;
		cursor: pointer;
	}
</style>
<template>

	<div style="height: 100%;">
		<div class="displayFlexBet" style="margin-bottom: 10px;">
			<div @click="visible1 = true,form=$options.data().form" class="displayFlex point">
				<div class="addButton">+</div>
				<div>新增原辅料</div>
			</div>
			<div style="margin-left: 20px;" class="displayFlex">
				<el-input placeholder="原辅料名称" v-model="getParams.materialName" style="width: 150px;" clearable></el-input>
			
				<el-select v-model="getParams.materialType" placeholder="原辅料类型" style="margin-left: 10px;width: 120px;" clearable>
					<el-option label="原料" value="RAW_MATERIAL" />
					<el-option label="辅料" value="SUBSIDIARY_MATERIAL" />
				</el-select>
			
				<el-select v-model="getParams.busiStatus" filterable placeholder="请选择" style="margin-left: 10px;width: 120px;">
					<el-option label="启用" value="IN_USE" />
					<el-option label="停用" value="NOT_USE" />
				</el-select>
				
				<el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="getEntAuxiliaryMaterialList">筛选</el-button>
			</div>
		</div>


		<div style="background: #f5f5f5;height: 100%;">
			<el-table :data="tableData" style="background: #fff;" size="mini" border stripe :height="contentHeight*0.76+'px'">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="materialName" label="原辅料名称">
				</el-table-column>
				<el-table-column prop="unitValue" label="原辅料单位">
				</el-table-column>
				<el-table-column prop="materialTypeStr" label="原辅料类型">
				</el-table-column>
				<el-table-column prop="busiStatusStr" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.busiStatus == 'IN_USE'" type="success"
							size="mini">{{scope.row.busiStatusStr}}</el-tag>
						<el-tag v-else type="danger" size="mini">{{scope.row.busiStatusStr}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
				</el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template slot-scope="scope">
						<template>
							<el-button v-if="scope.row.busiStatus== 'IN_USE'" type="text" @click="updateBusiStatus(scope.row)"
								style="color: #F56C6C;" size="small">
								停用
							</el-button>
							<el-button v-else type="text" size="small" @click="updateBusiStatus(scope.row)" style="color: #F56C6C;">
								启用
							</el-button>
						</template>

						<el-button type="text" size="small" @click="visible1 = true,form = scope.row">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog :visible.sync="visible1" title="原辅料信息" width="40%">
			<el-form ref="form3" :model="form" :rules="formRules" label-width="80px" label-position="left">

				<el-form-item label="名称" prop="materialName">
					<el-input v-model="form.materialName" style="width: 100%;"></el-input>
				</el-form-item>

				<el-form-item label="类型" prop="materialType">
					<el-select v-model="form.materialType" placeholder="请选择" style="width: 100%;">
						<el-option label="原料" value="RAW_MATERIAL" />
						<el-option label="辅料" value="SUBSIDIARY_MATERIAL" />
					</el-select>
				</el-form-item>

				<el-form-item label="计量单位" prop="unitCode" style="width: 100%;">
					<el-select v-model="form.unitCode" style="width: 100%;">
						<el-option :label="item.value" :value="item.code" v-for="(item,index) in unitList">
						</el-option>
					</el-select>
				</el-form-item>

				<div class="displayFlex" v-for="(item,index) in form.ingredientList" :key="index" style="width: 100%;">
					<el-form-item label="有害元素" prop="ingredientName">
						<el-input v-model="item.ingredientName"></el-input>
					</el-form-item>
					<el-form-item label="元素占比" prop="percent" style="margin-left: 10px;">
						<div class="displayFlex">
							<el-input v-model="item.percent" type="number"></el-input>
							<span style="margin-left: 5px;">%</span>
						</div>
					</el-form-item>
					<div style="width: 80px;text-align: right;color: #F56C6C;margin-bottom: 22px;"
						@click="deleteIngredientList(index)">
						删除
					</div>
				</div>
				<div @click="addIngredientList" style="color: #3a3ef4">添加元素</div>

				<div style="text-align: center;">
					<el-button type="primary" @click="saveOrUpdate()">保存</el-button>
				</div>
			</el-form>
		</el-dialog>
	</div>

</template>

<script>
	let that
	export default {
		data() {
			return {
				visible1: false,
				tableData: [],
				unitList: [],
				getParams: {
					busiStatus: "IN_USE",
					materialTypeList:['RAW_MATERIAL', 'SUBSIDIARY_MATERIAL']
				},
				contentHeight: window.innerHeight,
				form: {
					id: '', // 原辅料id
					materialName: '', // 原辅料名称，必填
					unitCode: '', // 原辅料单位，必填
					materialType: '',
					ingredientList: []
				},
				formRules: {
					materialName: [{
						required: true,
						message: '请输入原辅料名称',
						trigger: 'blur',
					}],
					materialType: [{
						required: true,
						message: '请选择类型',
						trigger: 'blur',
					}],
					unitCode: [{
						required: true,
						message: '请输入原辅料单位',
						trigger: 'blur'
					}]
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.ajax({
				url: '/codeType/listCodeValue',
				data: {
					typeCode: 'UNIT_TYPE'
				},
				success: function(data) {
					if (data.status == 1) {
						that.unitList = data.data;
					}
				}
			});

			that.getEntAuxiliaryMaterialList()
		},

		methods: {
			//添加有害元素
			addIngredientList() {
				that.form.ingredientList.push({
					ingredientName: '',
					percent: ''
				})
			},


			deleteIngredientList(index) {
				that.form.ingredientList.splice(index, 1)
			},

			updateBusiStatus(item) {
				this.$confirm('是否确定此操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/entProductMaterial/updateBusiStatus',
						data: {
							materialId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.getEntAuxiliaryMaterialList()
							}
						},
					})
				})
			},

			getEntAuxiliaryMaterialList() {
				that.ajax({
					url: '/entProductMaterial/getEntProductMaterialList',
					data: JSON.stringify(that.getParams),
					contentType: 'application/json',
					success: function(result) {
						that.tableData = result.data
					},
				})
			},

			cancle() {
				that.form = that.$options.data().form
				that.visible1 = false
			},

			saveOrUpdate() {
				that.$refs['form3'].validate(function(valid) {
					if (valid) {
						that.$confirm('是否确定保存, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {

							that.ajax({
								url: '/entProductMaterial/saveEntProductMaterial',
								data: JSON.stringify(that.form),
								contentType: 'application/json',
								success: function(result) {
									that.$message.success("保存成功！")
									that.cancle()
									that.getEntAuxiliaryMaterialList()
								},
							})
						})
					}
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>